<template>
  <div class="page-tabbar">
    <ul class="nav navbar-nav flex-row">
      <li class="flex-grow-1 flex-y-center flex-x-center" v-for="(item,index) in navs">
        <a class="flex-grow-1" :href="item.url" :class="{'active':activeIndex==index}">
          <span class="barIcon">
            <img v-if="activeIndex==index" :src="item.chooseIcon" alt="">
            <img v-else="" :src="item.icon" alt="">
          </span>
          {{item.name}}
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
  let cdn = cdnBase + '/';
  import {jumpUrlConfig} from 'src/const/jumpUrlConfig'

  export default {
    props: {
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        navs: [
          {
            name: "首页",
            url: jumpUrlConfig.homeUrl,
            chooseIcon: cdn + '/static/img/tabIcon/1_1.png',
            icon: cdn + '/static/img/tabIcon/1.png'
          },
          {
            name: "二手房",
            url: jumpUrlConfig.SecondHouseUrl,
            chooseIcon: cdn + '/static/img/tabIcon/search_active.png',
            icon: cdn + '/static/img/tabIcon/search_no_active.png'
          },
          {
            name: "公司",
            url: jumpUrlConfig.AboutUrl,
            chooseIcon: cdn + '/static/img/tabIcon/4_4.png',
            icon: cdn + '/static/img/tabIcon/4.png'
          }
        ],
      }
    },
    // beforeCreate() {
    //   this.navs = JSON.parse(getStore('navs'));
    // },
    methods: {}
  }

</script>
<style lang="less" scoped>
  .page-tabbar {
    width: 100%;
    .nav {
      width: 100%;
      &.navbar-nav {
        bottom: 0;
        left: 0;
        position: fixed;
        z-index: 20;
        height: 49px;
        background: #fff;
        //background: rgba(255, 255, 255, 0.9);
        &:after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          height: 1px;
          border-top: 1px solid #d5d4d4;
          color: #d5d4d4;
          transform-origin: 0 0;
          transform: scaleY(0.5);
        }
        li {
          a {
            display: block;
            color: #404040;
            font-size: 10px;
            padding-top: 3px;
            height: 46px;
            text-align: center;
            &.active {
              color: @red;
            }
            .barIcon {
              display: block;
              margin: 1px auto;
              width: 25px;
              height: 25px;
              background: no-repeat center center;
              background-size: cover;
              //  background-position:center center;
            }
          }
        }
      }
    }
  }
</style>

